<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.bg {
				position: relative;
			}

			.box {
				width: 200px;
				height: 100px;
				position: absolute;
				background-color: lightgray;
			}

			.title {
				width: 200px;
				height: 40px;
				line-height: 40px;
				padding-left: 20px;
				border-bottom: 1px solid white;
			}

			.content {
				width: 200px;
				height: 60px;
				padding: 5px 10px;
				box-sizing: border-box;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="bg">
			<div class="box" style="top: 0;left: 0;">
				<div class="title">title</div>
				<div class="content">按住左键不松可以拖拽哦</div>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		var winWidth = window.innerWidth;
		var winHeight = window.innerHeight;
		console.log("w:", winWidth, " h:", winHeight);
		var box = document.querySelector(".box");
		
		document.addEventListener("mousedown",function(){
			//鼠标按下之后，如果一直没有松开（即一直移动）
			document.addEventListener("mousemove",mouseMove);
			//鼠标弹起之后，取消移动事件
			document.addEventListener("mouseup",function(){
				console.log("mouseup");
				document.removeEventListener("mousemove",mouseMove);
			})
			
			function mouseMove(e){
				box.style.top = e.pageY - 50 + "px";
				box.style.left = e.pageX - 100 + "px";
				if (e.pageY - 50 < 0) {
					box.style.top = 0;
				} else if (e.pageY - 50 > winHeight - 100) {
					box.style.top = winHeight - 100 + "px";
				}
				if (e.pageX - 100 < 0) {
					box.style.left = 0;
				} else if (e.pageX - 100 > winWidth - 200) {
					box.style.left = winWidth - 200 + "px";
				}
			}
		})
	</script>
</html>
